<template>
  <div class="common-user-choice">
    <div v-if="btnType === 'input'" class="common-user-choice-content" @click="openPannel">
      <span v-if="!currentCheck.label">+选择成员</span>
      <span v-else>
        {{ currentCheck.label }}
      </span>
    </div>
    <el-button v-else type="primary" @click="openPannel">{{ btnText }}</el-button>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" title="成员列表" append-to-body width="659px">
      <div class="common-user-choice-dialog">
        <div class="__ui_serch">
          <el-input
            v-model="searchParams"
            placeholder="请输入"
            @input="searchChange"
          />
          <el-icon class="__ui_icon" size="12">
            <search />
          </el-icon>
        </div>
        <user-pannel ref="panelRef" :search-params="searchParams" :sure-btn-loading="sureBtnLoading" @handleClose="handleClose" @handleSure="handleSure" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { nextTick } from 'vue'
import userPannel from './userPannel.vue'
const props = defineProps({
  btnType: {
    type: String,
    default: 'input'
  },
  btnText: {
    type: String,
    default: ''
  },
  needCallBack: {
    type: Boolean,
    default: false
  },
  sureBtnLoading: {
    type: Boolean,
    default: false
  },
  // 是否清空
  isClearValue: {
    type: Boolean,
    default: false
  }
})
const panelRef = ref(null)
const emit = defineEmits(['submit'])
let dialogVisible = ref(false)
let searchParams = ref('')
let currentCheck = ref({})
const handleClose = () => {
  searchParams.value = ''
  dialogVisible.value = false
}
const handleSure = (data) => {
  if (!props.needCallBack) {
    dialogVisible.value = false
  }
  currentCheck.value = data
  emit('submit', data)
}
const openPannel = () => {
  dialogVisible.value = true
  nextTick(() => {
    panelRef.value.radioValue = currentCheck.value.label ? JSON.stringify(currentCheck.value) : ''
  })
}
let timeout = ref(null)
const searchChange = () => {
  timeout.value = null
  panelRef.value.clearSearchList()
  timeout.value = setTimeout(() => {
    panelRef.value.goSearch(searchParams.value)
  }, 250)
}
defineExpose({
  currentCheck,
  dialogVisible
})
</script>
<style lang="scss" scoped>
.common-user-choice{
  &-content{
    display: flex;
    align-items: center;
    width: 528px;
    height: 44px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    color: rgba(0, 73, 173, 1);
    font-size: 14px;
    padding: 0 18px;
    cursor: pointer;
  }
}
.common-user-choice-dialog{
  .__ui_serch{
    position: absolute;
    top: 13px;
    right: 44px;
    width: 160px;
    height: 33px;
    .__ui_icon{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
    }
  }
}
</style>